<template>
	<view class="u-page fullpage flex flex-direction" :style="skin">
		<view class="top-wrap">
			<zx-nav noTitle color="#fff">
				<view slot="center" class="u-text-center" style="padding-left: 68px;position: relative;">
					限时秒杀
					<view class="cart" @tap="navTo('/pages/car/car', 'switchTab')">
						<u-badge max="99" :value="cartNum"></u-badge>
						<image :src="`${assetsPath}/cart.png`" mode="widthFix"></image>
					</view>
				</view>
			</zx-nav>
			<skillprofilterbar @changeFilrer="changeFilrer"></skillprofilterbar>
		</view>
		<view class="main u-flex-1">
			<mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="false" ref="mescrollRef">
				<!-- 数据列表 -->
				<view class="list">
					<skill-pro-item
						v-for="(items, indexs) in productList"
						:key="indexs"
						:index="indexs"
						:proinfo="items"
						direction="row"
						:width="proWidth"
						@changeNum="info => changeInfo(info, indexs)"
					></skill-pro-item>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import skillProItem from '@/components/skill-pro-item';
import skillprofilterbar from '@/components/skillprofilterbar';
import { mapState } from 'vuex';
import sharemixin from '@/common/sharemixin.js';
export default {
	data() {
		return {
			productList: [],
			proWidth: uni.upx2px(210) + 'px',
			filter: {},
			share_title: '限时秒杀',
			share_page: '/pages/skilllist/skilllist'
		};
	},
	components: { skillProItem, skillprofilterbar },
	computed: {
		...mapState(['cartNum'])
	},
	mixins: [MescrollMixin, sharemixin],
	methods: {
		downCallback() {
			this.mescroll.resetUpScroll();
		},
		upCallback() {
			this.getProductList();
		},
		getProductList(type) {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize,
				is_seckill: 1
			};
			param = {
				...param,
				...this.filter
			};
			this.$postAction(this.$api.getProductList, param, {
				custom: {
					ShowLoading: false
				}
			}).then(da => {
				if (da.code == 0 && da.data && da.data.length > 0) {
					let curPageData = da.data;
					this.mescroll.endBySize(curPageData.length, da.count);
					if (this.mescroll.num == 1) this.productList = []; //如果是第一页需手动制空列表
					this.productList = this.productList.concat(curPageData); //追加新数据
				} else {
					if (this.mescroll.num == 1) this.productList = [];
					this.mescroll.endSuccess(0, false);
				}
			});
		},
		changeInfo(info, index) {
			this.$set(this.productList, index, info);
		},
		changeFilrer(filter) {
			this.filter = {};
			if (Object.keys(filter).length > 0) {
				for (var key in filter) {
					if (filter[key]) {
						this.filter.order_by = key;
						this.filter.order_by_type = filter[key];
						break;
					}
				}
			}
			this.productList = [];
			this.mescroll.resetUpScroll();
		},
		navTo(url, type) {
			uni[type]({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
.u-page {
	background: #ff8375;
}
.cart {
	position: absolute;
	right: -10px;
	top: 0;
	image {
		display: block;
		width: 46upx;
		height: 43upx;
	}
	.u-badge {
		position: absolute;
		right: 0rpx;
		transform: translate(50%, -50%);
		top: 0;
		z-index: 999;
	}
}
.main {
	background: #fff;
	border-radius: 24upx 24upx 0px 0px;
	margin: 0;
	height: 0;
	overflow: auto;
	.list {
		margin: 0 28upx;
	}
}
</style>
